
@extends('home/master')
@section('title','堆糖生活家--个人专辑')
@section('style')
    <link rel="stylesheet" href="{{url('css/detail.5b474624.css')}}">
{{--    <script src="{{url('js/lib.bundle.a6ecd17d.js')}}"></script>--}}
    <style>
        .woo-swb form{
            margin-left:500px;
        }
        .woo-swb form select{
            width:100px;
            height:30px;
            line-height:30px;
            text-align: center;
            font-size:20px;
            margin-top:10px;
        }
        .woo-swb form input{
            padding-top:2px;
            margin-left:5px;
            width:50px;
            height:30px;
            font-size:15px;
        }
        .lalala{
            padding-top:50px;
            margin:0 auto;
            font-size:20px;
        }
    </style>
@endsection
@section('content')
<div id="content">
    <div class="layer layer-full oh">
        <div class="tube">
            <div id="woo-holder">
                <a name="woo-anchor"></a>
                <div class="preview-action clr">
                    <div class="preview-slider-wrap">
                        <a class="preview-min" href="javascript:;"></a>
                        <div class="preview-slider">
                            <a href="javascript:;"></a>
                        </div>
                        <a class="preview-max" href="javascript:;"></a>
                    </div>
                    <a class="preview-ok btn-blue" href="javascript:;">确定</a>
                    <a class="preview-cancel btn-gray" href="javascript:;">取消</a>
                </div>

                <div class="woo-swb woo-cur" style="display: block;min-height:800px;height:auto">
                    {{--<div class="woo-tmpmasn woo-pcont nomyname dt-xitems clr woo-masned" style="position:relative;height:0;overflow:hidden;margin:0;padding:0;">--}}
                    {{--</div>--}}
                    <div class="clr"  style="position: relative; width: 1200px;  min-height:600px;margin:0 auto;margin-top:30px;">
                        <form action="{{url('user/xingzuo')}}"method="get" enctype="multipart/form-data">
                            {{--{{csrf_field()}}--}}
                            <select name="xingzuo" id="">
                                <option value="白羊座">白羊座</option>
                                <option value="金牛座">金牛座</option>
                                <option value="双子座">双子座</option>
                                <option value="巨蟹座">巨蟹座</option>
                                <option value="狮子座">狮子座</option>
                                <option value="处女座">处女座</option>
                                <option value="天枰座">天枰座</option>
                                <option value="天蝎座">天蝎座</option>
                                <option value="射手座">射手座</option>
                                <option value="魔蝎座">魔蝎座</option>
                                <option value="水瓶座">水瓶座</option>
                                <option value="双鱼座">双鱼座</option>
                            </select>
                            <input type="submit" value="查看">
                        </form>
                        <div class="lalala">
                        @if(!empty($jsonObj))
                        <p>星座名称:{{$jsonObj->result->name}}</p>
                        <p>查询日期:{{$jsonObj->result->datetime}}</p>
                        <p>综合指数:{{$jsonObj->result->all}}</p>
                        <p>幸运颜色:{{$jsonObj->result->color}}</p>
                        <p>健康指数:{{$jsonObj->result->health}}</p>
                        <p>爱情指数:{{$jsonObj->result->love}}</p>
                        <p>财运指数:{{$jsonObj->result->money}}</p>
                        <p>幸运数字:{{$jsonObj->result->number}}</p>
                        <p>速配星座:{{$jsonObj->result->OFriend}}</p>
                        <p>今日概述:{{$jsonObj->result->summary}}</p>
                        <p>工作指数:{{$jsonObj->result->work}}</p>
                        </div>
                            @else
                            <div class="lalala">
                                选择你的星座,马上开始测试今天的运势吧~~~
                            </div>

                            @endif
                    </div>
                </div>
                    <div class="woo-pager">
                        <div class="woo-pbr woo-mpbr" style="position:relative;bottom:20px;">
                            <ul class="woo-dib">
                                <li class="woo-cur">1</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{{--创建想自己的专辑--}}
<div class="blockUI blockMsg blockPage" id="create"style="z-index: 9011; position: fixed; padding: 0px; margin: -156px 0px 0px -330px; width: 660px; top: 50%; left: 50%; text-align: left; color: rgb(0, 0, 0); border: none; height: 272px; background: none;display:none;">
    <div class="mask-body" style="width: 660px;">
        <div class="tt-s"><span>创建专辑</span><a class="mask-close" id="close"target="_self" href="javascript:;" >关闭</a></div>
        <div class="mask-cont">
            <div id="popcreatealbum" class="popcreatealbum">
                <form id="createalbum" method="post" action="{{url('user/create')}}" enctype="multipart/form-data">
                    {{csrf_field()}}
                    <table cellspacing="0" cellpadding="0">
                        <tbody>
                        <tr>
                            <td width="60" align="right">专辑名</td>
                            <td>
                                <input class="ipt" type="text" name="name" id="name"  maxlength="40"placeholder="亲，别忘了给你的专辑取个名字哦">
                                <span id="nspan"></span>
                            </td>
                            <td rowspan="4">
                                <h6>常用标签</h6>
                                <div class="usetag da" id="popal-mbaddtagsel">
                                    <a href="#" class="add">家居</a><a href="#" class="add">设计</a>
                                    <a href="#" class="add">插画</a>
                                    <a href="#" class="add">电影</a>
                                    <a href="#" class="add">旅行</a>
                                    <a href="#" class="add">手工</a>
                                    <a href="#" class="add">女装</a>
                                    <a href="#" class="add">男装</a>
                                    <a href="#" class="add">配饰</a>
                                    <a href="#" class="add">美食</a>
                                    <a href="#" class="add">摄影</a>
                                    <a href="#" class="add">艺术</a>
                                    <a href="#"class="add">封面</a><a href="#"class="add">动漫</a>
                                    <a href="#"class="add">怀旧</a><a href="#"class="add">街拍</a>
                                    <a href="#"class="add">小孩</a><a href="#"class="add">宠物</a>
                                    <a href="#"class="add">植物</a><a href="#" class="add">人物</a></div>
                            </td>
                        </tr>
                        <tr>
                            <td align="right">描述</td>
                            <td>
                                <textarea class="txa" name="desc" maxlength="600" data-optional="1"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td align="right">图片</td>
                            <td>
                                <input type="file" name="pic" >
                            </td>
                        </tr>
                        <tr>
                            <td align="right">标签</td>
                            <td>
                                <div class="pr">
                                    <div class="divipt clr">
                                        <input id="tag" class="l ipt mr8" autocomplete="off" type="text" name="tag" value="" maxlength="100" data-optional="1"placeholder="亲，请在右侧选择标签吧^*^">
                                    </div>
                                    <label for="popal-mbaddtagipt" id="popal-mbaddtag-lb" style="display: none;">多个标签用空格隔开</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>
                                <a class="abtn l" href="javascript:;" target="_target">
                                    <button type="submit" id="button"><u>创建</u></button>
                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </form>
            </div>
        </div>
    </div>
</div>

{{--点击创建，那么创建个人专辑的表单显示在页面上，点击关闭，那么页面消失--}}
    <script>
        var createbtn=document.getElementById('createbtn');
        var create=document.getElementById('create');
        var close=document.getElementById('close');
        createbtn.onclick=function()
        {
            create.style.display='block';
        }
        close.onclick=function()
        {
            create.style.display='none';
        }
    </script>
{{--在创建专辑时，选中哪个标签，那么在表单的标签栏中会显示--}}
    <script>
            $('.add').click(function (e) {
                $(this).css({'color':'#FF4466','border-color':'#FF4466'});
                content='';
                content=$('#tag').val()+$(this).html()+';';
                $('#tag').val(content);
            })
    </script>
<script>
   var name=document.getElementById('name');
    name.onblur=function()
    {
        if(name.value=='')
        {
           var nspan=document.getElementById('nspan');
           nspan.innerHTML="<a style='color:red'>亲，写内容吧</a>"
        }
    }
</script>
@endsection